<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-button type="primary" @click="edit" v-show="!inEdit">编辑</el-button>
        <el-button type="primary" @click="cancelEdit" v-show="inEdit">取消编辑</el-button>
        <el-button type="primary" @click="resetInfo" v-show="inEdit">重置数据</el-button>
        <el-button type="primary" @click="infoSubmit" v-show="inEdit">提交修改</el-button>
        <el-row>
            <el-col :span="12">
                <el-form ref="infoForm" :model="teacher" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="工号">
                        <el-input v-model="teacher.no" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input class="editable" v-model="teacher.name" placeholder="请输入姓名" :disabled="!inEdit"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input class="editable" v-model="teacher.phone" placeholder="请输入电话" :disabled="!inEdit"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" >
                        <el-select class="editable" v-model="teacher.gender" :value="teacher.gender" placeholder="请选择性别" :disabled="!inEdit">
                            <el-option value="男" label="男"></el-option>
                            <el-option value="女" label="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生日" >
                        <el-date-picker class="editable" placeholder="请选择生日" label="生日" type="date"  v-model="teacher.birthday" style="width: 100%;" :disabled="!inEdit">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email" >
                        <el-input class="editable" v-model="teacher.email" placeholder="请输入邮箱" :disabled="!inEdit"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>修改密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form ref="passwordForm" :model="passwordModel" :rules="passwordRules" label-width="100px" size="large">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input v-model="passwordModel.oldPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="passwordModel.newPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="newPasswordAgain">
                        <el-input v-model="passwordModel.newPasswordAgain" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="passwordSubmit">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                rules:{
                    name:[
                        {required:true,message:'请输入姓名',trigger:'blur'},
                        {pattern: /^\S{2,20}$/,message:'姓名必须是2-20位的非空字符串',trigger:'blur'}
                    ],
                    phone:[
                        {required:true,message:'请输入电话',trigger:'blur'},
                        {pattern: /^[0-9]{11}$/,message:'电话必须11位的数字',trigger:'blur'}
                    ],
                    email:[
                        {required:true,message:'请输入用户邮箱',trigger:'blur'},
                        {type:'email',message:'邮箱格式不正确',trigger:'blur'}
                    ]
                },
                passwordRules:{
                    oldPassword:[
                        {required:true,message:'请输入原始密码',trigger:'blur'},
                        {min:3,max:16,message:'密码长度为 4 - 16 位非空字符',trigger:'blur'}
                    ],
                    newPassword:[
                        {required:true,message:'请输入新的密码',trigger:'blur'},
                        {min:3,max:16,message:'密码长度为 4 - 16 位非空字符',trigger:'blur'}
                    ],
                    newPasswordAgain:[
                        {validator:this.checkNewPasswordAgain,trigger:'blur'},
                    ]
                },
                passwordModel:{
                    oldPassword:'',
                    newPassword:'',
                    newPasswordAgain:''
                },
                inEdit:false,
                backupTeacher:{},
                teacher:{}
            }
        },
        methods: {
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },
            errorMsg(msg) {
                this.$message.error(msg);
            },
            getInfo() {
                axios.get(this.http_prefix+"teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.teacher=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            edit(){
                this.backupTeacher={...this.teacher}
                let elements=document.getElementsByClassName("editable");
                for(let i=0;i<elements.length;i++)
                {
                    elements[i].disabled=false
                }
                this.inEdit=true
            },
            updateInfo(){
                axios.put(this.http_prefix+"teacher",JSON.stringify(this.teacher),this.config).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        this.getInfo()
                        return;
                    }
                    this.successMsg(resp.data.msg)
                    this.cancelEdit()
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            cancelEdit(){
                let elements=document.getElementsByClassName("editable");
                for(let i=0;i<elements.length;i++)
                {
                    elements[i].disabled="true"
                }
                console.log(elements)
                this.inEdit=false
            },
            resetInfo(){
                this.teacher={...this.backupTeacher}
            },
            checkNewPasswordAgain(rule,value,callback){
                if(value==='')
                {
                    callback(new  Error('请确认新密码'))
                }else{
                    if(value!==this.passwordModel.newPassword)
                    {
                        callback(new Error('两次密码不一致'))
                    }
                    callback()
                }
            },
            changePassword()
            {
                axios.put(this.http_prefix+"teacher/changePassword",JSON.stringify(this.passwordModel),this.config).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.successMsg(resp.data.msg)
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            infoSubmit(){
                this.$refs.infoForm.validate(valid=>{
                    if(!valid){
                        this.warnMsg("提交的信息不合法")
                        return false;
                    }
                    this.updateInfo();
                })
            },
            passwordSubmit(){
                this.$refs.passwordForm.validate(valid=>{
                    if(!valid){
                        this.warnMsg("提交的信息不合法")
                        return false;
                    }
                    this.changePassword();
                })
            },
            init(){
                this.getInfo();
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>